<template>
  <div style="padding: 20px;">
    <el-card>
      <el-form :model="form" label-width="100px">
        <el-form-item label="用户名">
          <el-input v-model="form.username" placeholder="请输入用户名" clearable />
        </el-form-item>
        <el-form-item label="用户ID">
          <el-input v-model.number="form.uid" type="number" placeholder="请输入用户ID" clearable />
        </el-form-item>
        <el-button type="primary" @click="searchUser">查询</el-button>
      </el-form>
    </el-card>

    <el-card style="margin-top: 20px">
      <el-table :data="userList" style="width: 100%" v-loading="loading">
        <el-table-column type="expand">
          <template #default="{ row }">
            <div style="margin: 0 40px">
              <h4>报名课程</h4>
              <el-table :data="row.courses" v-if="row.courses?.length">
                <el-table-column prop="cid" label="课程ID" width="100" />
                <el-table-column prop="cname" label="课程名称" />
                <el-table-column prop="stime" label="开始时间" width="180" />
                <el-table-column prop="etime" label="结束时间" width="180" />
                <el-table-column prop="count" label="人数" width="80" />
                <el-table-column prop="classHours" label="课时" />
                <el-table-column prop="fullPrice" label="价格" />
              </el-table>
              <el-alert v-else type="info" :closable="false" title="该用户暂未报名任何课程" />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="uid" label="用户ID" width="100" />
        <el-table-column prop="account" label="账号" />
        <el-table-column prop="username" label="姓名" />
        <el-table-column prop="gender" label="性别">
          <template #default="{ row }">{{ row.gender === 'M' ? '男' : '女' }}</template>
        </el-table-column>
        <el-table-column prop="age" label="年龄" />
        <el-table-column prop="title" label="头衔">
          <template #default="{ row }">
            <el-select
                v-model="row.title"
                placeholder="选择头衔"
                style="width: 120px;"
                @change="() => onTitleChange(row)"
                @focus="showUserCourses(row)"
            >
              <el-option label="正式会员" value="正式会员" />
              <el-option label="高级会员" value="高级会员" />
            </el-select>
            <el-button
                type="success"
                link
                @click="submitTitleChange(row)"
                :disabled="!row.editable"
            >提交</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-empty v-if="userList.length === 0 && !loading" description="暂无数据" />

      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="form.pageNum"
          :page-sizes="[5, 10, 20]"
          :page-size="form.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      />
    </el-card>


  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import request from '@/utils/request'
import { ElMessage } from 'element-plus'

const form = ref({
  uid: '',
  username: '',
  pageNum: 1,
  pageSize: 5
})
const userList = ref([])
const total = ref(0) // 总记录数
const loading = ref(false)
const showCourses = ref(false)
const selectedUser = ref(null)

const searchUser = async () => {
  try {
    loading.value = true;
    const res = await request.get('/v1/staff/user/query', {
      params: form.value
    });

    if (res.state === 2001) {
      userList.value = res.data.userList || [];
      total.value = res.data.total || 0; // 设置总记录数
    } else {
      ElMessage.warning(res.message || '查询失败');
    }
  } catch (error) {
    ElMessage.error('请求失败');
    console.error(error);
  } finally {
    loading.value = false;
  }
};

const submitTitleChange = async (row) => {
  try {
    const res = await request.post('/v1/staff/user/update/title', {
      uid: row.uid,
      title: row.title
    });

    if (res.state === 2001) {
      ElMessage.success('头衔更新成功');
      row.editable = false;
    } else {
      ElMessage.error(res.message || '更新失败');
    }
  } catch (error) {
    ElMessage.error('请求出错');
    console.error(error);
  }
};

const onTitleChange = (row) => {
  row.editable = true;
};

const showUserCourses = (row) => {
  showCourses.value = true;
  selectedUser.value = row;
};

// 分页相关方法
const handleSizeChange = (val) => {
  form.value.pageSize = val;
  searchUser();
};

const handleCurrentChange = (val) => {
  form.value.pageNum = val;
  searchUser();
};

onMounted(searchUser)
</script>
